class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '陪诊',
            index: 1,
            topprice: 158,
            secondprice: 128,
            trdprice: 98,
            sizehtml: [],
            sizeid: '',
            cphnum: 1,
            cate: 'FW',
            detail: `项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项
            目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情项目详情`,
            xuzhi: `预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知
            预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知
            预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知
            预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知预定须知`,
            poster: './src/peizhen.png',
            amount: 835,
            page: 1,
            price: 825,
            list: [
                {
                    name: '陪诊',
                    people: 20,
                    price: 120,
                    src: 'peizhen',
                },
                {
                    name: '探店达人',
                    people: 20,
                    price: 69,
                    src: 'tandian',
                },
                {
                    name: '陪拍',
                    people: 20,
                    price: 108,
                    src: 'peipai',
                },
            ],
            rid: 0,
            cpid: 1,
            keyword: '',
            JX: '安卓',
            serverinput: '',


            isall: !1
        };
    }









    componentDidMount() {
        if (Constant.SWITCH_VCONSOLE) {
            new VConsole();
        }

        let openid = localStorage.getItem('openid'), id = GetQueryString('id');


    }







    inputbz(e) {
        this.setState({ desc: e.target.value })
    }

    clear() {
        var b = confirm('确定要清空吗')
        if (b) {
            localStorage.removeItem('orderlist')
            this.setState({ list: [], desc: '', amount: 0 })
        }
    }

    gopay() {
        let { sizeid, openid } = this.state;
        if (sizeid == '' || sizeid == '请选择') {
            alert('请先选择尺寸')
        } else {

            canbuy(openid, res => {
                if (res.data == true) {
                    this.pay(sizeid)
                } else {
                    alert('请勿重复购买')
                }

            })
            // 
        }

    }

    selectchange(e) {
        let { value } = e.target
        this.setState({ sizeid: value })
    }

    selectchange1(e) {
        let { value } = e.target, { amount, allprice } = this.state;
        if (value == 0) {
            amount = 610
        } if (value == -1) {
            amount = 300
        } if (value == 1) {
            amount = 835
        }
        this.setState({ cpid: value, amount })
    }

    clickcate(name) {
        let { index } = this.state
        if (index != name) {
            this.setState({ index: name })
        }
    }


    render() {
        let { poster, index,xuzhi,detail, name, topprice, secondprice, trdprice } = this.state;
        return (
            <div id="app">
                <div className="poster">
                    <img src={poster} alt="" />
                </div>
                <div className="content">
                    <div className="name">{name}</div>
                    <div className="items">

                    <div className="item">
                            <div className="d1 cj">
                                <img src="./src/tongpai.png" alt="" />
                                <p>初级达人</p>
                            </div>
                            <p>￥{trdprice}/60分钟</p>
                        </div>
                        <div className="item">
                            <div className="d1 zj">
                                <img src="./src/yinpai.png" alt="" />
                                <p>中级达人</p>
                            </div>
                            <p>￥{secondprice}/60分钟</p>
                        </div>
                       
                        <div className="item">
                            <div className="d1 gj">
                                <img src="./src/jinpai.png" alt="" />
                                <p>高级达人</p>
                            </div>
                            <p>￥{topprice}/60分钟</p>
                        </div>
                    </div>
                </div>


                <div className="maincontent">
                    <div className="cate">
                        <p onClick={this.clickcate.bind(this, '0')} className={index == '0' ? 'c' : ''}>项目详情</p>
                        <p onClick={this.clickcate.bind(this, '1')} className={index == '1' ? 'c' : ''}>预定须知</p>
                    </div>
                    <div className="content">
                        {index==1?xuzhi:detail}

                    </div>

                </div>

                <div onClick={()=>{window.location.href='./friend.html'}} className="btn">预约</div>


            </div>
        )
    }
}

ReactDOM.render(
    <div>
        {/* <TopLine /> */}
        <div id='body'>
            {/* <Tabbar index='0' /> */}
            <Main />
        </div>
    </div>
    // <Barrage />
    , $('.container')[0]
)